<template>
	<view class="box">
		<!-- 温馨提示 -->
		<view class="question card red">
			温馨提示: 开票金额为消费者实付款金额，红包，优惠，购 物券等不在开票范围内
		</view>
		<!--  -->
		<view class="msg card">
			<view class="title f32 bold">开票信息</view>
			<!-- dd -->
			<view class="list f30">
				<view class="fw-bt">
					<view class="label">发票类型</view>
					<view class="right">
						<u-radio-group v-model="sendData.radiovalue1" placement="row" @change="groupChange"
							activeColor="#22B591" iconSize="15">
							<u-radio :customStyle="{marginLeft:'30rpx'}" v-for="(item, index) in radiolist1"
								:key="index" :label="item.name" :name="item.name">
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="fw-bt">
					<view class="label">抬头类型</view>
					<view class="right">
						<u-radio-group v-model="sendData.radiovalue2" placement="row" activeColor="#22B591"
							iconSize="15">
							<u-radio :customStyle="{marginLeft:'30rpx'}" v-for="(item, index) in radiolist2"
								:key="index" :label="item.name" :name="item.name">
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="fw-bt">
					<view class="label">发票抬头</view>
					<view class="right">
						<input type="text" v-model="sendData.name" placeholder="填写需要开具发票的企业名称">
					</view>
				</view>
				<view class="fw-bt">
					<view class="label">税号</view>
					<view class="right">
						<input type="text" v-model="sendData.no" placeholder="请输入公司税号">
					</view>
				</view>
				<view class="fw-bt">
					<view class="label">邮箱</view>
					<view class="right">
						<input type="text" v-model="sendData.email" placeholder="请输入邮箱">
					</view>
				</view>
				<view class="fw-bt">
					<view class="label">发票内容</view>
					<view class="right">
						<u-radio-group v-model="sendData.radiovalue3" placement="row" @change="groupChange3"
							activeColor="#22B591" iconSize="15">
							<u-radio :customStyle="{marginLeft:'30rpx'}" v-for="(item, index) in radiolist3"
								:key="index" :label="item.name" :name="item.name">
							</u-radio>
						</u-radio-group>
					</view>
				</view>
			</view>
		</view>
		<!-- 常见问题 -->
		<view class="content">
			<u-parse :content="content"></u-parse>
		</view>
		<!-- 		<view class="content" v-html="content"></view> -->
		<!-- 底部按钮 -->
		<view class="btn fw-bt">
			<view class="btn1" @click="submit(1)">不开发票</view>
			<view class="btn1 btn2" @click="submit(2)">提交申请</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '',
				// 基本案列数据
				radiolist1: [{
					name: '电子发票',
					disabled: false
				}, ], //发票类型

				radiolist2: [{
						name: '公司',
						disabled: false
					},
					{
						name: '个人/非企业',
						disabled: false
					},
				], //抬头类型
				radiolist3: [{
						name: '商品大类',
						disabled: false
					},
					{
						name: '商品明细',
						disabled: false
					},
				], //发票内容
				sendData: {
					radiovalue1: '电子发票',
					radiovalue2: '公司',
					radiovalue3: '商品大类',
					name: '', //企业名称
					no: '', //公司税号
					email: '', //邮箱
					open_fapiao: true, //开发票
				},
				order_ids: '',
				group_order_id: ''
			}
		},
		onLoad(e) {
			console.log(e)
			this.group_order_id = e.group_order_id
			this.order_ids = JSON.parse(e.order_ids)
			console.log(e)
			console.log(this.order_ids)
			this.getcontent()
		},
		methods: {
			getcontent() {
				this.$request('cache/sys_receipt_agree', {}, 'GET').then(res => {
					this.content = res.data.sys_receipt_agree
				})
			},
			// 提交申请
			submit(type) {
				console.log(this.sendData)
				if (type == 1) { //不开发票
					this.sendData.open_fapiao = false;
					uni.navigateBack({

					})
					return
				}

				if (!this.sendData.name && this.sendData.radiovalue2 == '公司') {
					this.$showToast('请填写名称');
					return false;
				}
				if (!this.sendData.no && this.sendData.radiovalue2 == '公司') {
					this.$showToast('请输入公司税号');
					return false;
				}
				if (!this.sendData.email) {
					this.$showToast('请输入邮箱');
					return false;
				}
				let data = {
					group_order_id: this.group_order_id,
					order_ids: this.order_ids,
					receipt_info: {
						receipt_type: 1,
						receipt_title_type: this.sendData.radiovalue2 == '公司' ? 2 : 1,
						receipt_title: this.sendData.name,
						duty_paragraph: this.sendData.no
					},
					delivery_info: { //开票联系信息
						email: this.sendData.email
					},
					mark: "",
					pr: this.radiovalue3
				}
				this.$request('user/receipt/createOrder', data).then(res => {
					if (res.status == 200) {
						uni.redirectTo({
							url: '/pages/state/success/success?type=7'
						})
					}
				})

			}
		}
	}
</script>
<style>
	page {
		background-color: #F5F5F5;
	}

	.content {
		width: 100%;
		box-sizing: border-box;
	}
</style>
<style lang="scss" scoped>
	.box {
		padding: 20rpx;

		.card {
			margin: 0 auto 20rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
		}

		.question {
			padding: 28rpx 40rpx;
			font-size: 24rpx;
			line-height: 40rpx;
		}

		.msg {
			padding: 40rpx 40rpx 60rpx;

			.list {
				&>view {
					margin-top: 60rpx;

					.label {
						width: 130rpx;
					}

					.right {
						// flex: 1;
						text-align: right;

						input {
							min-width: 480rpx;
						}
					}
				}
			}
		}

		.btn {
			margin-top: 30rpx;

			.btn1 {
				width: 280rpx;
				height: 100rpx;
				line-height: 100rpx;
				background: #FFFFFF;
				font-size: 32rpx;
				text-align: center;
				border: 1rpx solid #C2C2C2;
				border-radius: 20rpx;
			}

			.btn2 {
				width: 390rpx;
				color: #fff;
				background: linear-gradient(64deg, #2BCCA5, #22B591);
				box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(20, 187, 146, 0.4);
				border-radius: 20rpx;
			}
		}
	}
</style>
